<template>
  <div class="container">
  <el-row>
  <el-button style="float: left;" size="mini" type="primary" @click="add()">新增</el-button>
 <span style="display: none;">{{$route.query.userId}}</span>
 <span style="display: none;">{{$route.query.tableId}}</span>
  </el-row>
  <el-table
    :data="tableList"
    style="width: 100%">
    <el-table-column
      label="座位号">
      <!-- 插槽，类似迭代变量 -->
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.tableId }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="座位状态">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.tableState }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="reserve(scope.row)"><i class="el-icon-circle-plus"></i>预定</el-button>
        <el-button
          size="mini"
          @click="update(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="delInfo(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="block">
      <!-- page-size="5" 默认每页显示条数 -->
      <el-pagination
        @size-change="selectPage"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  <!-- 对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="isShow"
    width="30%">

    <el-form ref="form" label-width="80px">
      <br>
      <el-form-item label="座位号">
        <el-col :span="22">
         <!-- <input type="hidden" v-model="tableForm.tableId" /> -->
          <el-input v-model="tableForm.tableId" readonly></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="座位状态">
        <el-col :span="22">
          <el-select v-model="tableForm.tableState" @click="selectState()">
            <el-option value="空闲">空闲</el-option>
            <el-option value="预定">预定</el-option>
            <el-option value="占用">占用</el-option>
          </el-select>
        </el-col>
      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="saveInfo">保 存</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
  export default {
    name: "tableListEle",  //tableListEle只是一个属性描述，
    data() {
      return {
        userName:"",
        userId:0,
        
        tableList: [],
        title: "新增", // 模态框标题
        tableForm: { // 表单的请求对象
          userId: null,
          tableId: null,
          tableState: "",
        },
        total: 0,  //总条数
        totalPage: 0,   //总页数
        curPage: 1,   //当前页
        rows:5,     //每页条数
        isShow:false,
        title:""
      }
    },
    methods: {

      loaddata() { // 加载函数
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/api/tables",
          type: "get",
          data: {
            "page": mythis.curPage,
            "row": mythis.rows
          },
          dataType: "json",
          success: function(data) {
            console.log(data);
            mythis.tableList = data.info;
            mythis.total = data.total;
            mythis.totalPage = data.totalPage;
          }
        })
      },
      update(x) {
        //显示模态框
        this.isShow=true;
        this.title = "修改";
        // 把选中的值赋值给模态框的表单元素
        this.tableForm.tableId = x.tableId;
        this.tableForm.tableState = x.tableState;
      },
      reserve(x) {
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/api/userReserveTables",
          type: "post",
          contentType: "application/json",
          data: JSON.stringify(x),
          success: function(data) {
            //alert(data.info);
            //mythis.$alert(data.info);
            mythis.$message(data.info);
            if (data.info == "预定座位成功") {
              localStorage.setItem("tableId", x.tableId);
              // 关闭模态框
              mythis.isShow=false;
              //刷新
              mythis.loaddata();
              mythis.$router.replace("/indexE/order");
            }
          }
        })
      },
      saveInfo() { // 保存
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/api/updateTable",
          type: "put",
          contentType: "application/json",
          data: JSON.stringify(mythis.tableForm),
          success: function(data) {
            //alert(data.info);
            //mythis.$alert(data.info);
            mythis.$message(data.info);
            if (data.info == "修改座位状态成功") {
              // 关闭模态框
              mythis.isShow=false;
              //刷新
              mythis.loaddata();
            }
          }
        })
      },
      add() { // 新增
        //清除表单元素
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/api/addTable",
          type: "post",
          contentType: "application/json",
          data: JSON.stringify(mythis.tableForm),
          success: function(data) {
            mythis.$message(data.info);
            if (data.info == "新增座位成功") {
              //刷新
              mythis.loaddata();
            }
          }
        })
      },
      delInfo(x) { // 删除
        var mythis = this;
        if (confirm("你确定要删除改数据吗?")) {
          $.ajax({
            url: "http://localhost:8080/api/deleteTable",
            type: "get",
            data: {
              "id": x.tableId
            },
            dataType: "json",
            success: function(data) {
              mythis.$alert(data.info);
              if (data.info == "删除成功") {
                //刷新
                mythis.loaddata();
              }
            }
          })
        }
      },
      selectState(v) { //选择座位状态
        this.tableForm.tableState = v;
      },
      selectPage(v) { //用户选择页数
        this.rows = v;
        this.loaddata();
      },
      // v 传递选择的页数
      handleCurrentChange(v){ //当前页触发事件
        this.curPage=v;
        this.loaddata();
      }
    },
    mounted() {
      var user = sessionStorage.getItem("user");
      var jsonUser = JSON.parse(user);
      this.userName =  jsonUser.userName;
      this.userId =  jsonUser.userId;
      this.loaddata();
    }
  }
</script>

<style>
</style>
